<template>
  <div class="personal-data">
    <div class="box">

      <div class="data border">
        <p >头像</p>
       
        <!-- <van-uploader :after-read="afterRead" /> -->

        <div class="upbox">
          <img v-if='img_temp_url!=""' :src="img_temp_url" alt="">
          <img v-if='img_temp_url==""' :src="details.avatar" alt="">
          
          <input style="" type="file" name="" id="" @change="change($event)">
        </div>

      </div>
      <div class="data">
        <p>生日</p>

        <p class="phone"><input type="text" placeholder="例如:0000-00-00"   v-model="shengri"></p>
        
      </div>
       <div class="data">
        <p>邮箱</p>
        <p class="phone"><input type="text" placeholder="请输入邮箱"   v-model="email"></p>
      </div>
       <div class="data">
        <p>手机号</p>
        <p class="phone"><input type="text" placeholder="请输入电话号码"   v-model="mobile_phone"></p>
      </div>

       <div class="data">
        <p style="width:100px;">性别</p>
        <van-field
          class="data"
          readonly
          clickable
          label=""
          :value="value"
          placeholder="选择性别"
          @click="showPicker = true"
        />

        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
      </div>

      
      <!-- <div class="data">
        <p>性别</p>
        <p class="phone" v-if='details.sex==0'>保密</p>
        <p class="phone" v-if='details.sex==1'>男</p>
        <p class="phone" v-if='details.sex==2'>女</p>
      </div> -->


    </div>

    <div class="baocun" @click="bacocun">保存</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        details:'',
        img_temp_url:'',

        shengri:'',
        mobile_phone:"",
        email:'',

        value: '',
        showPicker: false,
        columns: ['保密', '男', '女']
      }
    },
    
    methods: {
      onConfirm(value) {
        this.value = value;
        this.showPicker = false;
      },
      getselfinfo(){
        this.$get("/api/gzh_order.php?action=user_info", {
          uid:localStorage.getItem('uid')
        }).then(res => { 
          // console.log(res.data)
          this.details=res.data
          if(res.data.sex==0){
            this.value='保密'
          }else if(res.data.sex==1){
            this.value='男'
          }else if(res.data.sex==2){
            this.value='女'
          }
          this.shengri=res.data.birthday,
          this.mobile_phone=res.data.mobile_phone,
          this.email=res.data.email
         
          
        }).catch(err => {

        });
      },
      change(e){
        console.log(e)
        var file=e.path[0].files[0];
   
        // var that=this
        this.upimgname=file.name

        let formData = new FormData()
        formData.append('action', 'user_edit')
        formData.append('uid', localStorage.getItem('uid'))
        formData.append('avatar', file)

        this.$axios({
            method: "post",
            url: "/api/gzh_order.php",
            // data:{    //这里是发送给后台的数据
            //     type:1,
            //     upload:file,
            // }
            data:formData,
            headers:{
                'Content-Type':'multipart/form-data'
            },
        })
        .then(response => {
            console.log(response)
        })
        .catch(error => {
            //请求失败返回的数据
        });
   
        var _this = this;
        var reader=new FileReader();
        
        reader.readAsDataURL(file);
        this.img_temp_url = reader.result;
        reader.onload = function (e) {
            _this.img_temp_url = e.target.result;
        }
      },
      bacocun(){
        var sex
        for (const key in this.columns) {
          if(this.columns[key]==this.value){
            sex=key
          }
        }

         this.$axios({
            method: "post",
            url: "/api/gzh_order.php",
            data:this.$qs.stringify({
              action:'user_edit',
              uid:localStorage.getItem('uid'),
              birthday:this.shengri,
              sex:sex,
              email:this.email,
              mobile_phone:this.mobile_phone,
             
            }),
            headers: {
                // 'Content-Type': 'application/x-www-form-urlencoded'
                // 'content-Type' : 'application/json'
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
        })
        .then(response => {
            console.log(response.data)
            if(response.data.error==0){
              this.$router.push({path:'/mine'})
            }
        })
      }
    },
    created () {
      this.getselfinfo();
    },
  }
</script>

<style scoped>
.baocun{
  width:606px;
  height:88px;
  background:rgba(5,163,86,1);
  border-radius:44px;
  margin:100px auto 0;
  font-size:36px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(255,255,255,1);
  line-height: 88px;
  text-align: center;
}
.personal-data{
  width: 100%;
  min-height: 100vh;
  background: #F8F8F8;
}
.box{
  width: 100%;
  background: #fff;
}
.data{
  width: 698px;
  height: 148px;
  margin: auto;
  font-size:28px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.border{
  border-bottom: 1px solid #EEEEEE;
}
.data img{
  width:102px;
  height:102px;
  border-radius:50%;
  background: #ccc;
}
.data .phone{
  font-size: 30px;
}
.phone input{
  border:none;
  text-align: end;
}
.upbox{
  width:102px;
  height:102px;
  position: relative;

}
.upbox input{
  position: absolute;
  left: 0;
  top:0;
  width:100%;
  height:100%;
  opacity: 0;
}

</style>
<style >
.van-cell{
  padding: 0; 
}
.van-field__control{
  text-align: end;
}
</style>